<template>
  <div class="input-div">
    <div class="label" v-if="labelName">
      <span v-show="required" style="color: red">*</span>
      {{ labelName }}：
    </div>
    <el-select ref="nuSelect" v-bind="$attrs" v-on="$listeners" @change="changeValue" @visible-change="visibleMonitoring">
      <template slot="prefix">
        <slot name="prefix"></slot>
      </template>
      <template slot="empty">
        <slot name="empty"></slot>
      </template>
      <el-option v-for="item in list" :key="item.value" :label="item.label" :value="item.value">
        <template>
          <slot></slot>
        </template>
      </el-option>
    </el-select>
    <span class="errMsg" :style="{ top: topPX }" v-show="errMsg != ''">{{ errMsg }}</span>
  </div>
</template>

<script>
// import '../../src/assets/admin.css'
var timeOut
export default {
  name: 'verify-select',
  created() {},
  mounted() {
    // 根据尺寸类型生成尺寸
    // switch (this.size) {
    //   case 'large':
    //     this.$refs.nuSelect.$el.style.height = '42px'
    //     this.topPX = '42px'
    //     var x = document.getElementsByClassName('el-input__icon')
    //     var i
    //     for (i = 0; i < x.length; i++) {
    //       x[i].style['line-height'] = '42px'
    //     }
    //     break
    //   case 'middle':
    //     this.$refs.nuSelect.$el.style.height = '32px'
    //     this.topPX = '32px'
    //     var x = document.getElementsByClassName('el-input__icon')
    //     var i
    //     for (i = 0; i < x.length; i++) {
    //       x[i].style['line-height'] = '32px'
    //     }
    //     break
    //   case 'small':
    //     this.$refs.nuSelect.$el.style.height = '28px'
    //     this.topPX = '28px'
    //     var x = document.getElementsByClassName('el-input__icon')
    //     var i
    //     for (i = 0; i < x.length; i++) {
    //       x[i].style['line-height'] = '28px'
    //     }
    //     break
    //   case 'mini':
    //     this.$refs.nuSelect.$el.style.height = '24px'
    //     this.topPX = '24px'
    //     var x = document.getElementsByClassName('el-input__icon')
    //     var i
    //     for (i = 0; i < x.length; i++) {
    //       x[i].style['line-height'] = '24px'
    //     }
    //     break
    //   default:
    //     this.$refs.nuSelect.$el.style.height = '42px'
    //     this.topPX = '42px'
    //     var x = document.getElementsByClassName('el-input__icon')
    //     var i
    //     for (i = 0; i < x.length; i++) {
    //       x[i].style['line-height'] = '42px'
    //     }
    //     break
    // }
  },
  data() {
    return {
      errMsg: '', //提示信息
      topPX: '42px', //提示框下移高度
    }
  },
  props: {
    //尺寸
    // size: {
    //   type: String,
    //   default: 'large',
    // },
    list: {
      type: Array,
      default: () => [],
    },
    //是否必填
    required: {
      type: Boolean,
      default: false,
    },
    //标题
    labelName: {
      type: String,
    },
  },
  methods: {
    //选项是否为空
    changeValue(value) {
      if (
        this.required &&
        (value == '' || value == undefined || value == null || value == [])
      ) {
        this.errMsg = '为必填项不能为空'
      }else{
        this.errMsg = ''
      }
    },
    visibleMonitoring(isShow) {
      if (!isShow) {
        let value = this.$refs.nuSelect.$options.propsData.value
        if (
          this.required &&
          (value == '' || value == undefined || value == null || value == [])
        ) {
          this.errMsg = '为必填项不能为空'
        }
      }
    },
  },
}
</script>
<style scoped>
.el-select{
  /* box-shadow: var(--select-box-shadow); */
}
.el-select ::v-deep .el-input__inner{
  border: none;
  box-shadow: var(--select-box-shadow);
}
.el-select-dropdown__item.selected {
  color: var(--select-selected) !important;
}
.el-select-dropdown__item:hover {
  background-color: var(--select-hover) !important;
}
.el-select .el-input.is-focus .el-input__inner {
  border-color: var(--select-selected) !important;
}
.input-div {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 240px;
  max-width: 400px;
}
.label {
  display: inline-block;
  padding: 0px 10px;
  vertical-align: middle;
}
.errMsg {
  position: absolute;
  color: red;
  font-size: 8px;
}
</style>
